<template>
  <div class="about-page">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="nav-container">
        <h1 class="logo">中国城市之旅</h1>
        <ul class="nav-menu">
          <li><router-link to="/" class="nav-link">首页</router-link></li>
          <li><router-link to="/city" class="nav-link">城市探索</router-link></li>
          <li><router-link to="/about" class="nav-link active">关于我们</router-link></li>
        </ul>
      </div>
    </nav>

    <main class="main-content">
      <!-- 页面头部 -->
      <section class="about-header">
        <div class="header-content">
          <h2 class="page-title">关于我们</h2>
          <p class="page-subtitle">致力于展示中国城市的独特魅力</p>
        </div>
        <div class="header-image">
          <div class="image-placeholder">
            <span class="team-icon">👥</span>
          </div>
        </div>
      </section>

      <!-- 关于内容 -->
      <section class="about-content">
        <!-- 网站介绍 -->
        <div class="content-section">
          <div class="section-header">
            <h3 class="section-title">网站介绍</h3>
            <p class="section-subtitle">我们的使命与愿景</p>
          </div>
          <div class="section-content">
            <p>中国城市之旅是一个展示中国各城市文化、历史、美食和旅游资源的官方网站。我们希望通过这个平台，让更多人了解中国的城市魅力，促进文化交流和旅游发展。</p>
            <p>我们的目标是成为最全面、最权威的中国城市信息平台，为游客提供最实用的旅行建议，为城市发展提供数据支持。</p>
          </div>
        </div>

        <!-- 团队信息 -->
        <div class="content-section">
          <div class="section-header">
            <h3 class="section-title">我们的团队</h3>
            <p class="section-subtitle">专业、热情、创新</p>
          </div>
          <div class="team-members">
            <div class="member-card" v-for="member in teamMembers" :key="member.id">
              <div class="member-avatar" :style="{ background: member.color }">
                <span class="member-icon">{{ member.emoji }}</span>
              </div>
              <div class="member-info">
                <h4 class="member-name">{{ member.name }}</h4>
                <p class="member-role">{{ member.role }}</p>
                <p class="member-desc">{{ member.description }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 联系方式 -->
        <div class="content-section">
          <div class="section-header">
            <h3 class="section-title">联系我们</h3>
            <p class="section-subtitle">随时欢迎您的建议与反馈</p>
          </div>
          <div class="contact-info">
            <div class="contact-item">
              <div class="contact-icon">📧</div>
              <div class="contact-details">
                <h4>邮箱</h4>
                <p>contact@chinacitytour.com</p>
              </div>
            </div>
            <div class="contact-item">
              <div class="contact-icon">📞</div>
              <div class="contact-details">
                <h4>电话</h4>
                <p>400-123-4567</p>
              </div>
            </div>
            <div class="contact-item">
              <div class="contact-icon">🏢</div>
              <div class="contact-details">
                <h4>地址</h4>
                <p>北京市朝阳区某某大厦</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer class="footer">
      <div class="footer-content">
        <p>&copy; 2024 中国城市之旅官方网站</p>
        <div class="footer-links">
          <a href="#" class="footer-link">隐私政策</a>
          <a href="#" class="footer-link">使用条款</a>
          <a href="#" class="footer-link">联系我们</a>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'AboutView',
  data() {
    return {
      teamMembers: [
        {
          id: 1,
          name: '张三',
          emoji: '👨‍💼',
          color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          role: '项目经理',
          description: '负责项目整体规划和管理，拥有10年旅游行业经验'
        },
        {
          id: 2,
          name: '李四',
          emoji: '👩‍💻',
          color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
          role: '前端开发',
          description: '负责网站界面开发和用户体验，精通Vue和React'
        },
        {
          id: 3,
          name: '王五',
          emoji: '👨‍🎨',
          color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
          role: '内容编辑',
          description: '负责城市信息收集和内容编写，资深旅行作家'
        },
        {
          id: 4,
          name: '赵六',
          emoji: '👩‍💼',
          color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
          role: '市场推广',
          description: '负责网站推广和用户增长，数字营销专家'
        }
      ]
    }
  }
}
</script>

<style scoped>
.about-page {
  min-height: 100vh;
  background: var(--background);
}

/* 页面头部 */
.about-header {
  background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
  color: white;
  padding: 4rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 0 0 20px 20px;
}

.header-content {
  flex: 1;
}

.page-title {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: bold;
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
}

.header-image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.image-placeholder {
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.team-icon {
  font-size: 4rem;
}

/* 关于内容 */
.about-content {
  max-width: 1200px;
  margin: 4rem auto;
  padding: 0 2rem;
}

.content-section {
  margin-bottom: 4rem;
}

.section-header {
  text-align: center;
  margin-bottom: 2rem;
}

.section-title {
  font-size: 2.5rem;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.section-subtitle {
  color: var(--text-light);
  font-size: 1.1rem;
}

.section-content {
  background: white;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: var(--shadow-sm);
  line-height: 1.8;
  color: var(--text-light);
}

/* 团队成员 */
.team-members {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.member-card {
  background: white;
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.member-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.member-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-icon {
  font-size: 2.5rem;
}

.member-name {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--text-dark);
}

.member-role {
  color: var(--secondary-color);
  font-weight: 600;
  margin-bottom: 1rem;
}

.member-desc {
  color: var(--text-light);
  line-height: 1.6;
}

/* 联系信息 */
.contact-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.contact-item {
  background: white;
  border-radius: 15px;
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.contact-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.contact-icon {
  font-size: 2.5rem;
}

.contact-details h4 {
  margin-bottom: 0.5rem;
  color: var(--text-dark);
}

.contact-details p {
  color: var(--text-light);
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .about-header {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }

  .page-title {
    font-size: 2rem;
  }

  .team-members {
    grid-template-columns: 1fr;
  }

  .contact-info {
    grid-template-columns: 1fr;
  }

  .contact-item {
    flex-direction: column;
    text-align: center;
  }
}
</style>